//引入样式
require("../../assets/css/common.css");
require("../../assets/font_44fp3ls0tzq/iconfont.css");
require("../../assets/css/reset.css");
require("../../assets/css/normalize.css");
require("../../assets/css/tabbar.less");
require("../../assets/css/sports.less");
require("./sports_drill_list_play.less");
//引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	//本地存储获取数据
	let fragments = JSON.parse(localStorage.getItem("fragments"));
	console.log(fragments);
	//将数据渲染到页面
	let video = dom.get(".main video");
	let n = 0;

	function play() {
		dom.get("#part-right").textContent = fragments.length;
		dom.get("#part-left").textContent = n + 1;
		dom.get("#text").textContent = fragments[n].title;
		dom.get(".main video").src = axios.defaults.baseURL + fragments[n].videoUrl;
		video.play();
		//进度条;
		setInterval(function () {
			dom.get(".progress-bar").style.width =
				(100 * video.currentTime) / video.duration + "%";
		}, 50);
	}
	play();
	//实现自动播放
	video.addEventListener("ended", function () {
		n++;
		if (n < fragments.length) {
			play();
		}
	});

	//实现点击上页
	dom.get("#top").addEventListener("click", function () {
		n--;
		// if (n >= 0) {
		// 	play();
		// } else {
		// 	n = 0;
		// }

		// 简写
		if (n < 0) {
			n = 0;
		}
		play();
	});

	//实现点击下页
	dom.get("#bottom").addEventListener("click", function () {
		n++;
		// if (n < 4) {
		// 	play();
		// } else {
		// 	n = fragments.length - 1;
		// }

		//简写
		if (n >= fragments.length) {
			n = fragments.length - 1;
		}
		play();
	});

	//点击暂停
	dom.get("#pause").addEventListener("click", function () {
		dom.get("#mask").style.display = "block";
		dom.get("#box").style.display = "block";
		dom.get("#current span").textContent = fragments[n].title;
		dom.get("#current img").src = axios.defaults.baseURL + fragments[n].imgUrl;

		video.pause();
	});

	//点击开始训练
	dom.get("#play").addEventListener("click", function () {
		dom.get("#mask").style.display = "none";
		dom.get("#box").style.display = "none";
		video.play();
	});

	//点击结束退后训练页面
	dom.get(".end").addEventListener("click", function () {
		history.back();
	});
});
